<template>
	<div>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">排课管理</span>
			</Col>
			<Button style="float: right;background-color: orange;color: white;font-size: 14px;margin: 0 45px;" @click="addmngsubject">+&nbsp;新增排课</Button>
		</Row>
		<Row style="padding: 45px;">
			<div v-for="(item,index) in subjectList" @mouseover="mouseOver(index)" @mouseout="mouseOut(index)" :key="item.subjectid" style="float: left; display: inline-block;width: 18%;margin-right: 1%; height: 150px;border: 1px #e4e5e7 solid;">
				<div style="height: 100px;width: 100%;display: inline-block;background-color: #FF9900;">
					
					<span style="width: 100%;display: inline-block; font-size: 18px;padding:20px 7px 0 7px;float: left;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.pkname}}</span>
					<!--<span style="width: 35%;display: inline-block; float: right;padding-top: 24px;padding-right: 7px ;font-size: 14px;">{{item.teacher}}</span>-->
					<div style="display: inline-block;width: 100%;">
						<span style="font-size: 12px;float: left; padding: 7px 0 0 7px;">{{item.grade}}·{{item.classtype}}</span>
						<span style="font-size: 12px;float: right; padding: 7px 7px 0 0;">{{item.subjecttime}}</span>
					</div>
				</div>
				<div style="display: inline-block; width: 100%;display: block;">
					<a @click="rules" style="display: inline-block;width: 50%;border-right: 1px solid #CCCCCC;float: left;margin-top: 16px;">排课规则</a>
					<a @click="confirm=true" style="display: inline-block;width: 50%;float: left;margin-top: 16px;">自动排课</a>
					<Modal title="提示" v-model="confirm" :closable="false"  class-name="vertical-center-modal" @on-ok="save" @on-cancel="cancelmodel">
					<p>确定进行自动排课吗？</p>
			</Modal>
				</div>
				<div style="float: right;position: relative;top: -130px;right: 10px;" v-if="item.showsmall==true?true:false">
					<div style="display: inline-block; background-color: #000000; opacity: 0.7;">
						<span @click="gotoedit(index)" style="z-index: 1000;color: white;margin: 5px;">编辑</span>
					</div>
					<div style="display: inline-block; background-color: #000000; opacity: 0.7;">
						<span @click="gotodel(index)" style="z-index: 1000;color: white;margin: 5px;">删除</span>
					</div>
				</div>
			</div>
		</Row>
		<div v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin:0 auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:550px;border: 1px solid #e9eaec;padding: 50px;border-radius: 15px;">
			<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
				<span style="margin-bottom: 20px;font-size: 21px;">{{title}}</span>
			</Row>
			<Row style="font-size: 15px;">
				<Col style="text-align: center;padding: 10px;">
				<span>排课名称:</span>
				<Input v-model="coursename" type="text" placeholder="排课名称,不超过8个" :maxlength="8" style="text-align: center; width: 60%;position: relative;"></Input>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:</span>
				<Select v-model="gradename" @on-change="gradenameChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in gradenameList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				
				<Col style="text-align: center;padding: 10px;">
				<span>科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目:</span>
				<Select v-model="subjectname" @on-change="subjectnameChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in subjectnameList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<!--<Col style="text-align: center;padding: 10px;">
				<span>任课老师:</span>
				<Select v-model="teachername" @on-change="teachernameChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in teachernameList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>-->
				<Col style="text-align: center;padding: 10px;">
				<span>班级类型:</span>
				<Select v-model="classtype" @on-change="classtypeChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in classtypeList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>课&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时:</span>
				<Select v-model="classtime" @on-change="classtimeChange" style="text-align: center; width: 60%;position: relative;">
					<Option v-for="(item,index) in classtimeList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
			</Row>
			<Row style="text-align: center;">
				<Col span="24" style="margin-top:15px">
				<Button type="ghost" @click="cancel" icon="close-round" style="margin-right: 20px;">取消</Button>
				<Button v-if="this.title=='新增排课'?true:false" type="primary" @click="savesort" icon="checkmark-round">保存</Button>
				<Button v-if="this.title=='编辑排课'?true:false" type="primary" @click="editsavesort" icon="checkmark-round">保存</Button>
				</Col>
			</Row>
			
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				listsubjectId:"",
				obj:"",
				title:"",
				confirm:false,
				classtime:"",
				classtype:"",
//				teachername:"",
				gradename:"",
				subjectname:"",
				coursename:"",
				sortSettingHidden:false,
				classtypeList: [{
						value: 1,
						label: "普通班",
					},
					{
						value: 2,
						label: "提高班",
					},
					{
						value: 3,
						label: "高考班",
					},
				],
//				teachernameList: [{
//						value: 1,
//						label: "赵老师",
//					},
//					{
//						value: 1,
//						label: "钱老师",
//					},
//					{
//						value: 1,
//						label: "孙老师",
//					},
//					{
//						value: 1,
//						label: "李老师",
//					},
//					{
//						value: 1,
//						label: "周老师",
//					},
//					{
//						value: 1,
//						label: "吴老师",
//					},
//					{
//						value: 1,
//						label: "郑老师",
//					},
//					{
//						value: 1,
//						label: "王老师",
//					},
//					{
//						value: 1,
//						label: "冯老师",
//					},
//					{
//						value: 1,
//						label: "陈老师",
//					},
//				],
				subjectnameList:[
				{
					value:1,
					label:"语文",
				},
				{
					value:2,
					label:"数学",
				},
				{
					value:3,
					label:"英语",
				},
				{
					value:4,
					label:"物理",
				},
				{
					value:5,
					label:"化学",
				},
				{
					value:6,
					label:"生物",
				},
				{
					value:7,
					label:"历史",
				},
				{
					value:8,
					label:"地理",
				},
				{
					value:9,
					label:"政治",
				},
				],
				gradenameList:[
				{
					value:1,
					label:"高一",
				},
				{
					value:2,
					label:"高二",
				},
				{
					value:3,
					label:"高三",
				},
				],
				subjectList: [{
						subjectid: "1",
						teacher: "赵老师",
						pkname:"高三排课",
						subject: "语文",
						grade:"高三",
						classtype: "提高班",
						subjecttime: "4课时/每周",
						showsmall: false,
					},
					{
						subjectid: "2",
						teacher: "李老师",
						pkname:"高二排课",
						subject: "语文",
						grade:"高二",
						classtype: "高考班",
						subjecttime: "4课时/每周",
						showsmall: false,
					},
					{
						subjectid: "3",
						teacher: "王老师",
						pkname:"高一排课",
						subject: "语文",
						grade:"高一",
						classtype: "普通班",
						subjecttime: "4课时/每周",
						showsmall: false,
					},
					{
						subjectid: "4",
						teacher: "王老师",
						pkname:"高三排课",
						subject: "语文",
						grade:"高三",
						classtype: "普通班",
						subjecttime: "4课时/每周",
						lou: "20#",
						floot: "3层",
						classroom: "教室1",
						roomtype: "普通教室",
						showsmall: false,
					},
				],
				classtimeList: [{
						value: 1,
						label: "4课时/每周",
					},
					{
						value: 2,
						label: "6课时/每周",
					},
					{
						value: 3,
						label: "8课时/每周",
					},
					{
						value: 4,
						label: "12课时/每周",
					},
				],

			}
		},
		methods: {
			addmngsubject: function() {
				this.title="新增排课"
				this.sortSettingHidden=true
				this.coursename=""
				this.subjectname="语文"
				this.gradename="高一"
				this.classtime = "4课时/每周"
				this.classtype = "普通班"
//				this.teachername = "赵老师"
			},
			gotoedit: function(index) {
				this.title="编辑排课"
				this.sortSettingHidden=true
				this.obj=index
				this.listsubjectId=this.subjectList[index].subjectid
				this.coursename=this.subjectList[index].pkname
				this.subjectname=this.subjectList[index].subject
				this.gradename=this.subjectList[index].grade
				this.classtime = this.subjectList[index].subjecttime
				this.classtype = this.subjectList[index].classtype
//				this.teachername = this.subjectList[index].teacher
			},
			gotodel: function(index) {
				this.subjectList.splice(index, 1)
			},
			mouseOver: function(index) {
				this.subjectList[index].showsmall = true
			},
			mouseOut: function(index) {
				this.subjectList[index].showsmall = false
			},
			divideclass:function(){},
			rules:function(){
				this.$router.push({
					name: 'scheduleRules'
				})
			},
			cancel:function(){
				this.sortSettingHidden=false
			},
			gradenameChange:function(){},
			subjectnameChange:function(){},
			teachernameChange:function(){},
			classtypeChange:function(){},
			classtimeChange:function(){},
			savesort: function() {
				if(this.coursename == "") {
					alert('排课名称不能为空')
				} else {
					this.subjectList.push({
						subjectid: this.subjectList.length + 1,
						pkname:this.coursename,
						subjecttime: this.classtime,
						classtype: this.classtype,
//						teacher: this.teachername,
						grade:this.gradename,
						showsmall:false,

					})
					this.sortSettingHidden = false
					alert('保存成功')
				}
			},
			cancelmodel:function(){
				this.confirm=false
				this.findByGroadNo()
			},
			save:function(){
				alert('自动排课成功,前往排课查询')
				this.$router.push({
					name: 'teacherRules'
				})
			},
			editsavesort:function(){
				if(this.coursename == "") {
					alert('排课名称不能为空')
				} else {
					this.subjectList.splice(this.obj, 1, {
						subjectid: this.listsubjectId,
						pkname:this.coursename,
						subjecttime: this.classtime,
						classtype: this.classtype,
//						teacher: this.teachername,
						grade:this.gradename,
						showsmall:false,

					})
					this.sortSettingHidden = false
					alert('保存成功')
				}
			},
		},
		
	}
</script>

<style>

</style>